<template>
  <div class="container">
    <div ref="searchBox">
      <el-form ref="modelForm" :model="queryPrams">
        <SearchArea
          :listUrl="pageUrl.list"
          @ok="getListData(pageUrl.list)"
          @reset="handleReset(modelForm, {}, pageUrl.list)"
        >
          <el-col :span="8">
            <BaseInput
              label="用户ID"
              v-model="queryPrams.queryUserId"
              prop="queryUserId"
              :clearable="true"
            >
            </BaseInput>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="严重等级"
              v-model="queryPrams.queryStatus"
              :options="queryStatus"
              prop="userAccountStatus"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
        </SearchArea>
      </el-form>
    </div>
    <div class="list">
      <el-table
        :data="dataSourse"
        :max-height="tableHeight"
        :border="false"
        :highlight-current-row="true"
        row-key="uid"
      >
        <el-table-column type="index" align="center" label="序号" width="100" />

        <el-table-column
          prop="queryUserId"
          align="center"
          label="访问者ID"
          width="120"
        />

        <el-table-column
          prop="queryUserName"
          align="center"
          label="访问者昵称"
          width="120"
        />

        <el-table-column
          prop="queryName"
          align="center"
          label="访问API"
          width="170"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="queryUrl"
          align="center"
          label="API路径"
          width="170"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="queryDate"
          align="center"
          label="访问时间"
          width="170"
        />

        <el-table-column
          prop="queryStatusRemark"
          align="center"
          label="访问说明"
          width="220"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="queryPrams"
          align="center"
          label="访问参数"
          width="220"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="queryMethods"
          align="center"
          label="访问方式"
          width="100"
        />
      </el-table>
      <div ref="paginationBox">
        <BasePagination
          :pageSourse="pageSourse"
          :pageSizes="[10, 20, 30, 50]"
          :queryPrams="queryPrams"
          :listUrl="pageUrl.list"
          layout="total, pager, jumper, sizes"
          @onSearch="getListData(pageUrl.list)"
        >
        </BasePagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="admin-user">
import * as api from "@/api/index";
import { SearchArea } from "@components/FormSearch/index";
import { BaseInput, BaseSelect } from "@components/BaseForm/index";
import type { FormInstance } from "element-plus";
import usePageListData from "@/publicTs/pageListData";
import { ref, onMounted } from "vue";

let {
  pageSourse,
  dataSourse,
  queryPrams,
  handleReset,
  getListData,
  computedTableHeight,
} = usePageListData();

// form表单实例
let modelForm: any = ref();
// 检索区元素
const searchBox: any = ref(null);

// 列表相关url
let pageUrl = {
  list: api.admin.URL_QUERYAPILIST,
};

let queryStatus = [
  [1, "正常访问"],
  [2, "token异常"],
  [3, "无权限"],
  [4, "不存在"],
];

// table渲染高度
let tableHeight = ref(600);

onMounted(() => {
  handleReset(modelForm.value, {}, pageUrl.list);
  tableHeight.value = computedTableHeight(searchBox.value);
});

// 删除用户
function deleteUser(row: objectType<any>) {
  //
}
</script>

<style lang="less" scoped>
.container {
  padding: 0px 24px;
  box-sizing: border-box;
}
</style>
